<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/jquery.touchy.min.js"></script>
<script src="js/smoothscroll.js"></script>
<script>
    document.cookie="last=pages/touchscreen.php";
    taphold();
    draggable();
    pinchable();
</script>

<p class="xl">Periféricos - Pantalla táctil</p>
<p>La pantalla táctil es un dispositivo de entrada y salida de datos que el usuario puede controlar mediante toques directos sobre su superficie.</p>
<p>Al igual que en mouse y touchpad, la acción de presionar la pantalla táctil se denomina 'clic'.</p>
<p>Haga clic sobre este <a href="#cliclargo" class="smoothScroll" onclick="mostrar('cliclargo')">texto azul</a> para continuar.</p>

<div id="cliclargo" class="oculto">
    <p class="felicitacion">¡Excelente, ha aprendido a hacer clic!</p>
    <img src="img/timbre.jpg" height="128" align="right" id="timbre" title="Haga clic largo sobre esta imagen"></img>
    <p>El clic largo se realiza manteniendo presionada la pantalla durante medio segundo y muestra un menú de opciones disponibles para el elemento presionado.</p>
    <p>Para cerrar el menú alcanza con tocar en cualquier otra parte de la pantalla.</p>
    <p>Haga clic <i>largo</i> sobre el timbre para continuar.</p>
</div>

<div id="dragdrop" class="oculto">
    <p class="felicitacion">¡Felicitaciones, ha aprendido a hacer clic largo!</p>
    <p>Otra función de la pantalla táctil es 'arrastrar y soltar', la cual permite desplazarse por el documento. Esta función se obtiene al presionar la pantalla, arrastrar el dedo y levantarlo.</p>
    <p>Arrastre la pelota y sueltela dentro del aro para continuar.</p>
    <img src="img/ball.png" height="128" id="draggable"></img>
    <img src="img/basket.png" height="128" id="droppable" title="Suelte la pelota aquí."></img>
</div>

<div id="zoom" class="oculto">
    <p class="felicitacion">¡Excelente, ha aprendido a arrastrar y soltar!</p>
    <img src="img/lupa.png" height="192" align="right" id="pinchable" title="Presione la imagen con dos dedos y arrástrelos sobre la pantalla, separándolos."></img>
    <p>La última función que veremos es 'pellizcar', la cual se realiza presionando en cualquier lugar de la pantalla con el índice y el pulgar y arrastrando uno o ambos dedos (juntándolos para achicar o separándolos para agrandar).</p>
    <p>Pellizque la lupa para continuar</p>
</div>

<div id="final" class="oculto">
    <p class="felicitacion">¡Felicitaciones, ha aprendido a pellizcar la pantalla táctil!</p>
    <p class="siguiente">Haga clic <i>con el botón izquierdo</i> en el siguiente enlace para <a href="#" onclick="load('pages/tecladovirtual.php')">seguir aprendiendo</a>.</p>
</div>

<a id="fondo"></a>

<script>
    $(document).ready(function(){
        // excluir el div loading de jquery-mobile
        $('.ui-icon-loading').parent().text('');
        // eliminar texto duplicado a la izquierda de los botones
        var div = $("input[type='button']").parent();
        if (div.hasClass('ui-btn')) {
            div.text('');
        }
    });
</script>
